<template>
  <div class="tabel-content" :style="{'width': width, 'height': height}">
    <div class="header">
      <div v-for="col in columns" class="col" :style="getColStyle(col)">
        {{col.label}}
      </div>
      <div v-if="!hideOperationCol" class="col flex-1">
        操作
      </div>
    </div>
    <div class="body">
      <div class="flex table-row">
        <div v-for="col in columns" class="col text-center" :style="getColStyle(col)">
          <div v-if="col.type == 'treeInput'" class="flex" style="margin-left: -10px;">
            <i class="el-icon-caret-right" :class="{opend: !rootRow.hideChildren}" :style="{opacity: data.length > 0 ? 1 : 0}" @click="handleIcon(rootRow, 'firstRow')"></i>
            <el-input class="flex-1" v-model="rootRow[col.prop]" :disabled="isDisabled(rootRow, col.prop)" size="mini"></el-input>
          </div>
          <div v-if="col.type === 'select'">
            <el-select v-model="rootRow[col.prop]" size="mini" :disabled="isDisabled(rootRow, col.prop)" clearable @change="selectChange(col.prop, rootRow[col.prop], rootRow, 'root')">
              <el-option v-for="one in col.options" :key="one.value" :value="one.value" :label="one.label"></el-option>
            </el-select>
          </div>
          <div v-if="col.type === 'checkbox'">
            <el-checkbox v-model="rootRow[col.prop]" size="mini" :disabled="isDisabled(rootRow, col.prop)" @change="selectChange(col.prop, rootRow[col.prop], rootRow, 'root')"></el-checkbox>
          </div>
          <div v-if="col.type === 'input'">
            <el-input v-model="rootRow[col.prop]" :disabled="isDisabled(rootRow, col.prop)"></el-input>
          </div>
        </div>
        <div v-if="!hideOperationCol" class="col flex-1">
          <el-button v-if="!rootRow.hideAddChild" type="primary" size="mini" style="margin: 0; padding: 7px;" @click="operationRow('firstChild')" :disabled="rootRow.disabledChildren">添加子级</el-button>
        </div>
      </div>
      <table-row v-if="!rootRow.hideChildren" :data="data" :columns="columns" :childIndex="1" :operationRow="operationRow" :disabledChildren="rootRow.disabledChildren" :setIsDisabled="setIsDisabled"
        :hideChildren="rootRow.hideChildren" :handleIcon="handleIcon" :selectChange="selectChange" :hideOperationCol="hideOperationCol"></table-row>
    </div>
  </div>
</template>

<script>
import TableRow from './row'

export default {
  name: 'treeFormTabel',
  components: { TableRow },
  props: {
    width: {
      default: '100%',
      type: String
    },
    height: {
      default: 'auto',
      type: String
    },
    columns: {
      type: Array,
      require: true
    },
    data: {
      type: Array,
      require: true
    },
    clickRowBtn: {
      type: Function
    },
    setIsDisabled: {
      type: Function
    },
    selectChanged: {
      type: Function
    },
    hideOperationCol: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      rootRow: {
        key: 'root',
        type: 'object',
        isArray: false,
        hideAddChild: false
      },
      addRowData: {
        hideAddChild: true
      }
    }
  },
  created() {
    this.columns.forEach(item => {
      if (item.type == 'select') {
        this.addRowData[item.prop] = item.options[0] ? item.options[0].value : null
      } else if (item.type == 'checkbox') {
        this.addRowData[item.prop] = false
      } else {
        this.addRowData[item.prop] = null
      }
    })
  },
  methods: {
    setRootRow(row) {
      this.rootRow = Object.assign({}, row)
    },
    /**
     * 值联动
     */
    setRootRowSync(row) {
      this.rootRow = row
    },
    fomatPropertyList(data) {
      let newData = data.map(item => {
        this.$set(item, 'isArray', false)
        if (item.dataType == 'string' || item.dataType == 'text' || item.dataType == 'dateTime' || item.dataType == 'enum') {
          this.$set(item, 'type', 'string')
        }
        if (item.dataType == 'integer' || item.dataType == 'bigInteger') {
          this.$set(item, 'type', 'integer')
        }
        if (item.dataType == 'float' || item.dataType == 'double' || item.dataType == 'decimal') {
          this.$set(item, 'type', 'number')
        }
        if (item.dataType == 'boolean') {
          this.$set(item, 'type', 'boolean')
        }
        if (item.dataType == 'object') {
          this.$set(item, 'type', 'object')
          item.property = this.fomatPropertyList(item.relation.modelFeatureList)
        }
        if (item.entityRelationType == 2) {
          this.$set(item, 'isArray', true)
        }
        return item
      })
      return newData
    },
    selectChange(type, value, item, isFirst) {
      if (this.selectChanged) {
        this.selectChanged(type, value, item, isFirst)
      }
    },
    validate(data) {
      let valid = true
      for (let i = 0; i < data.length; i++) {
        const item = data[i]

        for (let index = 0; index < this.columns.length; index++) {
          const one = this.columns[index]
          if (one.require && !item[one.prop]) {
            valid = false
            this.$message.error(`${one.label}不能为空`)
            break
          }
        }
        if (valid === false) {
          break
        }

        if (item.property && item.property.length > 0) {
          valid = this.validate(item.property)
        }
        if (valid === false) {
          break
        }
      }

      return valid
    },
    handleIcon(row) {
      this.$set(row, 'hideChildren', row.hideChildren ? false : true)
    },
    isDisabled(row, prop) {
      if (row.disabledRow) {
        return true
      }

      if (row.editable && (prop === 'key' || prop === 'templateName')) {
        return false
      }

      if (this.setIsDisabled) {
        return this.setIsDisabled(row, prop)
      } else {
        return false
      }
    },
    getColStyle(col) {
      if (col.width) {
        return { width: col.width }
      }
      return { flex: 'auto' }
    },
    operationRow(operation, data, index) {
      if (this.clickRowBtn) {
        this.clickRowBtn(operation, data, index)
        return
      }
      if (operation === 'firstChild') {
        this.data.push(Object.assign({}, this.addRowData))
        this.$set(this.rootRow, 'hideChildren', false)
      }
      if (operation === 'addBrother') {
        data = data.splice(index + 1, 0, Object.assign({}, this.addRowData))
      }
      if (operation === 'addChild') {
        if (data[index].property) {
          data[index].property.push(Object.assign({}, this.addRowData))
        } else {
          this.$set(data[index], 'property', [Object.assign({}, this.addRowData)])
        }
        this.$set(data[index], 'hideChildren', false)
      }
      if (operation === 'delRow') {
        data = data.splice(index, 1)
      }
    },
  }
}
</script>

<style lang='scss' scoped>
.tabel-content {
  overflow: auto;

  .header {
    color: #333333;
    font-weight: bold;
    background-color: rgba(245, 247, 250, 1);
    display: flex;
    line-height: 44px;
  }

  .col {
    padding: 0 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .el-icon-caret-right {
    font-size: 24px;
    padding-top: 5px;
    height: 32px;
    color: #999;
    cursor: pointer;

    &.opend {
      transform: rotate(90deg);
    }
  }

  .table-row {
    padding: 5px 0;
  }
}
</style>
